<template>
  <section>
    <canvas height="250" width="250" id="clock"></canvas>
  </section>
</template>
<script>
  export default {
    mounted () {
      this.$nextTick(function () {
        var a, context, panelR, qstart, qend, secondLength, minuteLength, hourLength, color, baseAngle
        setInfo()
        setInterval(setTime, 20)

        function setInfo () {
          var canvas = document.getElementById('clock')
          a = 125
          canvas.width = 2 * a
          canvas.height = 2 * a
          context = canvas.getContext('2d')
          context.translate(a, a)
          panelR = 0.5 * a
          qstart = 0.61 * a
          qend = 0.685 * a
          secondLength = 0.58 * a
          minuteLength = 0.464 * a
          hourLength = 0.374 * a
          color = '#3fc1ff'
          baseAngle = (2 * Math.PI) / 200
        }

        function setTime () {
          var date = new Date()
          drawCanvas(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds())
        }

        function drawCanvas (Hour, Min, Sec, mSec) {
          context.clearRect(-a, -a, 2 * a, 2 * a)
          drawPanel()
          SetAlphaCircle(Sec, mSec)
          SetMinHourPanel(-(Hour / 6 - 0.5) * Math.PI - (Min * Math.PI / 1800) - (Sec * Math.PI / 21600), hourLength)
          SetMinHourPanel(-(Min / 30 - 0.5) * Math.PI - (Sec * Math.PI / 1800), minuteLength)
          SetSecondPanel(-(Sec / 30 - 0.5) * Math.PI - (mSec * Math.PI / 30000), secondLength)
        }

        var getAlpha = function (i, start) {
          start = i - start
          if (start < 0) start += 200
          return start > 100 ? (0.006 * (start) - 0.2) : 0.4
        }

        function SetAlphaCircle (Sec, mSec) {
          for (var i = 1; i <= 200; i++) {
            var angle = baseAngle * i
            var CurrentStart = Sec / 60 * 200 + mSec / 300 - 50
            if (CurrentStart < 0) CurrentStart += 200
            context.beginPath()
            context.globalAlpha = getAlpha(i, CurrentStart)
            context.strokeStyle = color
            context.lineWidth = 1
            context.moveTo(qstart * Math.cos(angle), qstart * Math.sin(angle))
            context.lineTo(qend * Math.cos(angle), qend * Math.sin(angle))
            context.stroke()
            context.closePath()
          }
          context.restore()
        }

        function SetMinHourPanel (angle, Length) {
          context.lineWidth = 2
          context.beginPath()
          context.lineCap = 'round'
          context.strokeStyle = color
          context.moveTo(8 * Math.cos(angle), -8 * Math.sin(angle))
          context.lineTo(Length * Math.cos(angle), -Length * Math.sin(angle))
          context.stroke()
        }

        function SetSecondPanel (angle, Length) {
          var offsetAngel = 0.063
          var cache = Length * 0.893
          context.lineWidth = 1
          context.fillStyle = color
          context.beginPath()
          context.moveTo(cache * Math.cos(angle - offsetAngel), -cache * Math.sin(angle - offsetAngel))
          context.lineTo(Length * Math.cos(angle), -Length * Math.sin(angle))
          context.lineTo(cache * Math.cos(angle + offsetAngel), -cache * Math.sin(angle + offsetAngel))
          context.closePath()
          context.fill()
        }

        function drawPanel () {
          context.save()
          context.beginPath()
          context.lineWidth = 2
          context.strokeStyle = color
          context.arc(0, 0, panelR, 0, 2 * Math.PI)
          context.stroke()
          context.beginPath()
          context.lineWidth = 2
          context.strokeStyle = color
          context.arc(0, 0, 6, 0, 2 * Math.PI)
          context.stroke()
        }
      })
    }
  }
</script>
<style>
  canvas {
    box-shadow: 0 0 10px 1px #00000059;
    border-radius: 5px;
  }
</style>
